<template>
  <div class="chart-box" :color="['#00aeff', '#00AEFF']" :reverse="true" :style="{ width: width, height: height }">
    <div v-if="title" class="chart-box-title">{{ title || '' }}</div>
    <div class="chart-box-right">
      <slot name="box-right"></slot>
    </div> 
    <div class="chart-box-content" :style="{top: title ? '25rem' : '0rem'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    width: {
      type: String,
      default: '300rem'
    },
    height: {
      type: String,
      default: '300rem'
    },
    titleWidth: {
      type: Number,
      default: 86
    },
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped lang="scss">
.chart-box{
  background-color: rgba($color: #000000, $alpha: 0);
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url('../../assets/img/组 1949.png');
  &-title{
    position: absolute;
    top: 20rem;
    left: 35%;
    width: 190rem;
    height: 17rem;
    background-image: url('../../assets/img/列表头.png');
    background-size: cover;
    line-height: 17rem;
    // padding-right: 44rem;
    text-align: center;
    color: #fff;
    font-size: 8rem;
    font-family: PingFang SC;
    font-weight: bold;
    white-space: nowrap;
  }
  &-right{
    position: absolute;
    top: 8rem;
    right: 5rem;
    height: 17rem;
    display: flex;
    justify-content: right;
    align-items: center;
  }
  &-content{
    position: absolute;
    top: 25rem;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
